<template>
    <div class="container">
        <div class="row">  
            <div class="col-12">  
                <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">  
                    <div class="carousel-inner">  
                        <div class="carousel-item">  
                            <img src="https://cos3.solepic.com/20210427/b_298834202104272146529890.jpg" style="height: 500px;" class="d-block w-100" alt="...">  
                        </div>  
                        <div class="carousel-item active">  
                            <img src="https://q0.itc.cn/images01/20240406/7d295ea8ab744b858d165137f55933fb.jpeg" style="height: 500px;" class="d-block w-100" alt="...">  
                        </div>  
                        <div class="carousel-item">  
                            <img src="../assets/防盗锁.jpg" style="height: 500px;" class="d-block w-100" alt="...">  
                        </div>  
                    </div>  
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">  
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>  
                        <span class="visually-hidden">Previous</span>  
                    </button>  
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">  
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>  
                        <span class="visually-hidden">Next</span>  
                    </button>  
                </div>  
            </div>  
        </div> 
    </div> 
</template>

<script>
    export default {
        name: "CarouselView"
    }
    
</script>

<style scoped>
.carousel-item {
  width: 100%;
  height: 500px;
  background-size: 100% 200px;
}
.carousel-item {  
  transition: transform 0.5s ease, opacity 0.5s ease;  
}  
.container {  
    max-width: 1400px;
}
</style>